<template>
  <div class="father">
    <h3>父组件</h3>
    <h4 v-show="computer">拿到弟弟送的电脑：{{ computer }}</h4>
    <Child1 />
    <Child2 />
  </div>
</template>

<script setup lang="ts" name="Father">
import { ref, onUnmounted } from "vue";
import emitter from "../../utils/emitter";
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";

let computer = ref();

emitter.on("get-computer", (value) => {
  computer.value = value;
});

onUnmounted(() => {
  emitter.off("get-computer");
});
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
.father button {
  margin-left: 5px;
}
</style>